<template>
  <div>
    <!-- 排名维度切换 -->
    <div class="mb-6">
      <div class="flex space-x-3">
        <button v-for="dimension in rankDimensions" :key="dimension.key" @click="currentDimension = dimension.key" :class="[
            'px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200',
            currentDimension === dimension.key
              ? 'bg-blue-100 text-blue-700 border border-blue-200'
              : 'bg-gray-100 text-gray-600 hover:bg-gray-200 border border-transparent'
          ]">
          {{ dimension.name }}
        </button>
      </div>
    </div>

    <!-- 排名信息卡片 -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
      <!-- 当前排名 -->
      <div class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl p-6 border border-blue-200">
        <div class="flex items-center justify-between mb-4">
          <h4 class="text-lg font-semibold text-blue-800">当前排名</h4>
          <div class="i-mdi:trophy text-2xl text-yellow-500"></div>
        </div>
        <div class="text-center">
          <div class="text-3xl font-bold text-blue-900 mb-2">
            {{ currentRankData.currentRank }}
          </div>
          <div class="text-sm text-blue-700">
            共 {{ currentRankData.totalStudents }} 人
          </div>
        </div>
      </div>

      <!-- 总分 -->
      <div class="bg-gradient-to-br from-green-50 to-green-100 rounded-xl p-6 border border-green-200">
        <div class="flex items-center justify-between mb-4">
          <h4 class="text-lg font-semibold text-green-800">总分</h4>
          <div class="i-mdi:star text-2xl text-yellow-500"></div>
        </div>
        <div class="text-center">
          <div class="text-3xl font-bold text-green-900 mb-2">
            {{ currentRankData.totalScore }}
          </div>
          <div class="text-sm text-green-700 mb-3">
            满分 {{ currentRankData.maxScore }}
          </div>
          <!-- 得分进度条 -->
          <div class="mb-2">
            <div class="flex justify-between text-xs text-green-600 mb-1">
              <span>0分</span>
              <span>{{ currentRankData.maxScore }}分</span>
            </div>
            <div class="w-full bg-green-200 rounded-full h-2">
              <div class="bg-green-600 h-2 rounded-full transition-all duration-500 ease-out" :style="{ width: getScoreProgress() + '%' }"></div>
            </div>
            <div class="text-xs text-green-600 mt-1">
              得分占比：{{ getScoreProgress().toFixed(1) }}%
            </div>
          </div>
        </div>
      </div>

      <!-- 排名百分比 -->
      <div class="bg-gradient-to-br from-purple-50 to-purple-100 rounded-xl p-6 border border-purple-200">
        <div class="flex items-center justify-between mb-4">
          <h4 class="text-lg font-semibold text-purple-800">排名百分比</h4>
          <div class="i-mdi:percent text-2xl text-purple-500"></div>
        </div>
        <div class="text-center">
          <div class="text-3xl font-bold text-purple-900 mb-2">
            {{ currentRankData.rankPercentage }}
          </div>
          <div class="flex items-center justify-center space-x-1 mb-3">
            <span class="text-sm text-purple-700">
              {{ getRankLevel(currentRankData.rankPercentage) }}
            </span>
            <button @click="showRankCriteria = true" class="i-mdi:help-circle text-sm text-purple-500 hover:text-purple-700 transition-colors"
              title="查看评价标准"></button>
          </div>
          <!-- 排名进度条 -->
          <div class="mb-2">
            <div class="flex justify-between text-xs text-purple-600 mb-1">
              <span>第1名</span>
              <span>第{{ currentRankData.totalStudents }}名</span>
            </div>
            <div class="w-full bg-purple-200 rounded-full h-2">
              <div class="bg-purple-600 h-2 rounded-full transition-all duration-500 ease-out" :style="{ width: getRankProgress() + '%' }"></div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 排名详情 -->
    <div class="bg-gray-50 rounded-xl p-6">
      <h4 class="text-lg font-semibold text-gray-800 mb-4">排名详情</h4>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <!-- 排名位置 -->
        <div class="space-y-3">
          <div class="flex justify-between items-center py-2 border-b border-gray-200">
            <span class="text-gray-600">排名位置</span>
            <span class="font-semibold text-gray-800">
              第 {{ currentRankData.currentRank }} 名
            </span>
          </div>
          <div class="flex justify-between items-center py-2 border-b border-gray-200">
            <span class="text-gray-600">总人数</span>
            <span class="font-semibold text-gray-800">
              {{ currentRankData.totalStudents }} 人
            </span>
          </div>
          <div class="flex justify-between items-center py-2 border-b border-gray-200">
            <span class="text-gray-600">排名百分比</span>
            <span class="font-semibold text-gray-800">
              {{ currentRankData.rankPercentage }}
            </span>
          </div>
        </div>

        <!-- 分数信息 -->
        <div class="space-y-3">
          <div class="flex justify-between items-center py-2 border-b border-gray-200">
            <span class="text-gray-600">总分</span>
            <span class="font-semibold text-gray-800">
              {{ currentRankData.totalScore }} 分
            </span>
          </div>
          <div class="flex justify-between items-center py-2 border-b border-gray-200">
            <span class="text-gray-600">平均分</span>
            <span class="font-semibold text-gray-800">
              {{ currentRankData.averageScore }} 分
            </span>
          </div>
          <div class="flex justify-between items-center py-2 border-b border-gray-200">
            <span class="text-gray-600">最高分</span>
            <span class="font-semibold text-gray-800">
              {{ currentRankData.maxScore }} 分
            </span>
          </div>
        </div>
      </div>
    </div>

    <!-- 评价标准弹窗 -->
    <div v-if="showRankCriteria" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50" @click="showRankCriteria = false">
      <div class="bg-white rounded-xl p-6 max-w-md w-full mx-4" @click.stop>
        <div class="flex items-center justify-between mb-4">
          <h3 class="text-lg font-semibold text-gray-800">排名评价标准</h3>
          <button @click="showRankCriteria = false" class="i-mdi:close text-gray-500 hover:text-gray-700 text-xl"></button>
        </div>
        <div class="space-y-3">
          <div class="flex justify-between items-center py-2 border-b border-gray-200">
            <span class="text-gray-600">优秀</span>
            <span class="font-semibold text-green-600">前 5%</span>
          </div>
          <div class="flex justify-between items-center py-2 border-b border-gray-200">
            <span class="text-gray-600">良好</span>
            <span class="font-semibold text-blue-600">前 5-10%</span>
          </div>
          <div class="flex justify-between items-center py-2 border-b border-gray-200">
            <span class="text-gray-600">中等</span>
            <span class="font-semibold text-yellow-600">前 10-20%</span>
          </div>
          <div class="flex justify-between items-center py-2 border-b border-gray-200">
            <span class="text-gray-600">一般</span>
            <span class="font-semibold text-orange-600">前 20-50%</span>
          </div>
          <div class="flex justify-between items-center py-2">
            <span class="text-gray-600">需努力</span>
            <span class="font-semibold text-red-600">50% 以后</span>
          </div>
        </div>
        <div class="mt-4 text-sm text-gray-500">
          注：排名百分比越小，表示排名越靠前
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

// 定义props
const props = defineProps({
  // 排名数据
  rankData: {
    type: Object,
    default: () => ({
      class: {
        currentRank: 8,
        totalStudents: 45,
        totalScore: 425,
        maxScore: 500,
        averageScore: 398,
        rankPercentage: '17.8%'
      },
      grade: {
        currentRank: 156,
        totalStudents: 1200,
        totalScore: 425,
        maxScore: 500,
        averageScore: 385,
        rankPercentage: '13.0%'
      },
      major: {
        currentRank: 23,
        totalStudents: 180,
        totalScore: 425,
        maxScore: 500,
        averageScore: 392,
        rankPercentage: '12.8%'
      }
    })
  },
  // 排名维度配置
  dimensions: {
    type: Array,
    default: () => [
      { key: 'class', name: '班级排名' },
      { key: 'grade', name: '年级排名' },
      { key: 'major', name: '专业排名' }
    ]
  },
  // 默认选中的维度
  defaultDimension: {
    type: String,
    default: 'class'
  }
})

// 定义emits
const emit = defineEmits(['dimension-change'])

// 当前排名维度
const currentDimension = ref(props.defaultDimension)

// 显示评价标准弹窗
const showRankCriteria = ref(false)

// 排名维度配置
const rankDimensions = computed(() => props.dimensions)

// 当前维度的排名数据
const currentRankData = computed(() => props.rankData[currentDimension.value])

// 监听维度变化
const handleDimensionChange = (dimension) => {
  currentDimension.value = dimension
  emit('dimension-change', dimension)
}

// 获取排名等级
const getRankLevel = (percentage) => {
  const num = parseFloat(percentage)
  if (num <= 5) return '优秀'
  if (num <= 10) return '良好'
  if (num <= 20) return '中等'
  if (num <= 50) return '一般'
  return '需努力'
}

// 获取排名进度百分比
const getRankProgress = () => {
  const percentage = parseFloat(currentRankData.value.rankPercentage)
  if (percentage === 0) return 0
  return (currentRankData.value.currentRank / currentRankData.value.totalStudents) * 100
}

// 获取得分进度百分比
const getScoreProgress = () => {
  const percentage = parseFloat(currentRankData.value.totalScore / currentRankData.value.maxScore * 100)
  if (percentage === 0) return 0
  return percentage
}

// 暴露方法给父组件
defineExpose({
  currentDimension,
  currentRankData,
  setDimension: (dimension) => {
    currentDimension.value = dimension
  }
})
</script>

<style lang="scss" scoped>
</style> 